import React, { Component } from "react";

/*
  事件传参
    1. 内联地使用 this.xxx.bind(this, 2)
      bind可以改变this指向。会产生一个新函数，bind的第二个参数会作为新函数的第一个参数
      bind函数是不会自动调用的
      不推荐，会使得内存增加

    2. 内联地使用onClick={() => this.xxx(2)}
      不是特别推荐, 用的最多的方式
      每一个箭头函数都会指向不同的内存，也会使内存增加

    3. 使用柯里化函数
      fn = (n) => () => {
        console.log(n);
      };
      理论上最推荐的方式
*/

class App extends Component {
  state = {};

  // fn = (n, e) => {
  //   console.log(n, e);
  // };

  // fn = (n) => {
  //   return () => {
  //     console.log(n);
  //   };
  // };
  fn = (n) => (e) => {
    console.log(n, e);
  };

  render() {
    return (
      <>
        <h2>事件传参</h2>
        {/* <button onClick={this.fn.bind(this, 2)}>btn2</button>
        <button onClick={this.fn.bind(this, 3)}>btn3</button> */}

        {/* <button onClick={(e) => this.fn(2, e)}>btn2</button>
        <button onClick={(e) => this.fn(3, e)}>btn3</button> */}

        <button onClick={this.fn(2)}>btn2</button>
        <button onClick={this.fn(3)}>btn3</button>
      </>
    );
  }
}

export default App;
